<!-- src/main/resources/templates/index.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>精美首页</title>
    <!-- 引入外部样式表 -->
    <link rel="stylesheet" th:href="@{/css/styles.css}">
</head>
<body>
<header>
    <h1 th:text="${welcomeMessage}">欢迎来到精美首页</h1>
</header>

<nav>
    <ul>
        <li><a th:href="@{/about}">关于我们</a></li>
        <li><a th:href="@{/services}">服务</a></li>
        <li><a th:href="@{/contact}">联系我们</a></li>
    </ul>
</nav>

<main>
    <section id="about">
        <h2 th:text="${aboutTitle}">关于我们</h2>
        <p th:text="${aboutText}">我们是一家专注于提供优质服务和技术解决方案的公司。我们的团队由一群充满激情的专业人士组成，致力于为客户提供最优质的服务。</p>
    </section>

    <section id="services">
        <h2 th:text="${servicesTitle}">我们的服务</h2>
        <p th:text="${servicesText}">我们提供一系列定制化服务，包括但不限于软件开发、网站设计、数据分析等。请联系我们了解更多详情。</p>
    </section>

    <section id="contact">
        <h2 th:text="${contactTitle}">联系我们</h2>
        <p th:text="${contactText}">如果您有任何问题或需要更多信息，请随时通过以下方式联系我们：</p>
        <p th:text="${contactEmail}">Email: info@example.com</p>
        <p th:text="${contactPhone}">Phone: +123 456 7890</p>
    </section>
</main>

<footer>
    &copy; 2024 | 精美首页 | 版权所有
</footer>
</body>
</html>